<template>
  <view class="page">
    <view class="tabs">
      <view v-for="(item, index) in uTabsProps.list" :key="index" class="tab"
        :class="{active: index === uTabsProps.current}" @click="uTabsChange(index)">{{item.name}}</view>
    </view>
    <!-- <u-tabs v-if="formOpen" :list="uTabsProps.list" :is-scroll="false" :current="uTabsProps.current" @change="uTabsChange"></u-tabs> -->
    <template v-if="uTabsProps.current === 0">
      <view v-for="(formInfo, index) in processFormList" :key="index" class="card-list">
        <view class="card-item">
          <view class="card-item-hd">预约信息</view>
          <view class="card-item-bd">
            <view class="card-title">
              受访人：{{formInfo.externalForm.formData.intervieweeName}} {{formInfo.externalForm.formData.intervieweePhone}}
            </view>
            <view class="card-desc">
              <text class="label">进校时间：</text>{{formInfo.externalForm.formData.startTime}} -
              {{formInfo.externalForm.formData.endTime}}
            </view>
            <view class="card-desc">
              <text class="label">进入校区：</text><text
                class="primary">{{formInfo.externalForm.formData.$enterCampus}}</text>
            </view>
            <view class="card-desc">
              <text class="label">入校事由：</text>{{formInfo.externalForm.formData.enterReason}}
            </view>
          </view>
        </view>
        <view class="card-item">
          <view class="card-item-hd">访客信息</view>
          <view class="card-item-bd">
            <view class="visitor-bar">
              <view class="visitor-avatar">
                <image :src="formInfo.externalForm.formData.visitorAvatar" mode=""></image>
              </view>
              <view class="visitor-content">
                <view class="visitor-title">
                  {{formInfo.externalForm.formData.visitorName || '-'}}
                  {{formInfo.externalForm.formData.visitorPhone || '-'}}
                  <view class="tag">{{formInfo.externalForm.formData.$visitorSex}}</view>
                </view>
                <view class="visitor-desc">
                  <image src="../../../../static/images/icon_visitor_idcard.png" mode=""></image>
                  {{formInfo.externalForm.formData.visitorIdNumber || '-'}}
                </view>
                <view class="visitor-desc">
                  <image src="../../../../static/images/icon_visitor_school.png" mode=""></image>
                  {{formInfo.externalForm.formData.visitorCompany || '-'}}
                </view>
                <view class="visitor-desc">
                  <image src="../../../../static/images/icon_visitor_car.png" mode=""></image>
                  {{formInfo.externalForm.formData.visitorPlateNumber || '-'}}
                </view>
                <view class="visitor-desc">
                  <image src="../../../../static/images/icon_visitor_entourage.png" mode=""></image>
                  {{formInfo.externalForm.formData.entourages || '-'}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>

    <!-- <view v-if="formOpen && uTabsProps.current === 0">
      <view v-for="(formInfo, index) in processFormList" :key="index" :body-style="{ padding: '3px 0' }">
        <view v-if="formInfo.formType === 0">
          <view>暂不支持内置表单</view>
        </view>
        <component v-if="formInfo.formType === 1" :is="dynaGetExternalFormComponent(formInfo.externalForm.routeKey)"
          :form-data-prop="formInfo.externalForm.formData" :flow-data-prop="flowData"
          :disabled="formInfo.externalForm.disabled" :form-btns="formInfo.externalForm.formBtns" v-bind="$props" />
      </view>
    </view> -->

    <view v-if="uTabsProps.current === 1" class="step-list">
      <view v-for="(item, index) in historyProcNodeList" class="step-item">
        <view class="step-line">
          <view class="step-status" :class="item.endTime ? 'done' : 'current'"></view>
        </view>
        <view class="step-title">{{ item.activityName }}</view>
        <view class="step-desc">
          实际办理：<text class="value">{{ item.assigneeName || '-' }}</text>
        </view>
        <view class="step-desc">
          候选办理：<text class="value">{{ item.candidate || '-' }}</text>
        </view>
        <view class="step-desc">
          接收时间：{{ item.createTime || '-' }}
        </view>
        <view class="step-desc">
          办结时间：{{ item.endTime || '-' }}
        </view>
        <view class="step-desc">
          耗时：<text class="primary">{{ item.duration || '-' }}</text>
        </view>
        <view v-if="item.commentList && item.commentList.length > 0" class="step-desc">
          <text v-for="(comment, index) in item.commentList" :key="index" class="value">
            {{ comment.fullMessage }}
          </text>
        </view>
      </view>
    </view>

    <!-- <view v-if="uTabsProps.current === 1" style="margin-left: 10px;">
      <u-time-line if="uTabsProps.current === 1">
        <u-time-line-item nodeTop="2" v-for="(item, index) in historyProcNodeList" :key="index">
          <template v-slot:node>
            <view class="u-node" :style="setColor(item.endTime)">
              <u-icon :name="setIcon(item.endTime)" color="#fff" :size="24"></u-icon>
            </view>
          </template>
          <template v-slot:content>
            <view class="u-order-title">{{ item.activityName }}</view>
            <view class="u-order-desc">
              <u-card v-if="item.activityType === 'startEvent'" :show-head="false" style="margin-left: 0;">
                {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
              </u-card>
              <u-card v-if="item.activityType === 'userTask'" :show-head="false" style="margin-left: 0;">
                <view slot="body">
                  <view>
                    实际办理：{{ item.assigneeName || '-' }}<br />
                    候选办理：{{ item.candidate || '-' }}<br />
                    接收时间：{{ item.createTime || '-' }}<br />
                    办结时间：{{ item.endTime || '-' }}<br />
                    耗时：{{ item.duration || '-' }}<br />
                  </view>
                  <view v-if="item.commentList && item.commentList.length > 0">
                    <view v-for="(comment, index) in item.commentList" :key="index">
                      <text v-if="comment.fullMessage">{{ comment.fullMessage }}</text>
                    </view>
                  </view>
                </view>
              </u-card>
              <u-card v-if="item.activityType === 'endEvent'" :show-head="false" style="margin-left: 0;">
                <view slot="body">
                  {{ item.createTime }} 结束流程
                </view>
              </u-card>
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>
    </view> -->
    <!-- <view if="uTabsProps.current === 2" style="margin-left: 10px;">
			<process-viewer
				:key="`designer-${loadIndex}`"
				:style="'height:' + height"
				:xml="xmlData"
				:finishedInfo="finishedInfo"
				:allCommentList="historyProcNodeList"
			/>
		</view> -->
  </view>
</template>

<script>
  import {
    externalFormCompReg
  } from '@/pages/flowableplus/work/mixins/externalFormCompReg.js';

  export default {
    name: 'WorkDetail',
    mixins: [externalFormCompReg],
    components: {

    },
    props: {},
    computed: {
      commentType() {
        return (val) => {
          switch (val) {
            case '1':
              // return '通过';
              return '受理';
            case '2':
              return '退回';
            case '3':
              return '驳回';
            case '4':
              return '委派';
            case '5':
              return '转办';
            case '6':
              return '终止';
            case '7':
              return '撤回';
          }
        };
      },
      approveTypeTag() {
        return (val) => {
          switch (val) {
            case '1':
              return 'success';
            case '2':
              return 'warning';
            case '3':
              return 'error';
            case '4':
              return 'primary';
            case '5':
              return 'success';
            case '6':
              return 'error';
            case '7':
              return 'info';
          }
        };
      },
    },
    data() {
      return {
        // 模型xml数据
        loadIndex: 0,
        xmlData: undefined,
        formInfo: {},
        finishedInfo: {
          finishedSequenceFlowSet: [],
          finishedTaskSet: [],
          unfinishedTaskSet: [],
          rejectedTaskSet: []
        },
        historyProcNodeList: [],
        // 部门名称
        deptName: undefined,
        // 部门树选项
        deptOptions: undefined,
        userLoading: false,
        // 用户表格数据
        userList: null,
        deptProps: {
          children: 'children',
          label: 'title'
        },
        deptId: '',
        queryUserParams: {},
        // 分页信息
        page: {
          currentPage: 1,
          pageSize: 10
        },
        total: 0,
        // 遮罩层
        loading: true,
        tableHeight: document.documentElement.clientHeight - 280,
        taskForm: {
          comment: '', // 意见内容
          procInsId: '', // 流程实例编号
          taskId: '', // 流程任务编号
          copyUserIds: '', // 抄送人Id
          vars: '',
          targetKey: ''
        },
        rules: {
          comment: [{
            required: true,
            message: '请输入审批意见',
            trigger: 'blur'
          }]
        },
        currentUserId: null,
        variables: [], // 流程变量数据
        taskFormOpen: false,
        taskFormInfo: {}, // 任务表单信息
        processFormList: [], // 流程表单列表
        formOpen: false, // 是否加载流程变量数据
        returnTaskList: [], // 回退列表数据
        processed: false,
        returnTitle: null,
        returnOpen: false,
        rejectOpen: false,
        rejectTitle: null,
        userData: {
          title: '',
          type: '',
          open: false
        },
        copyUser: [],
        nextUser: [],
        userMultipleSelection: [],
        userDialogTitle: '',
        userOpen: false,
        // nextApprover组件的属性对象
        nextApproverProps: {
          taskDefKey: '',
          proDefId: '',
          proDefKey: '',
          formData: {}
        },
        flowData: {
          curTask: {},
          currentUser: {}
        },
        dialog: {
          title: '流程办理',
          isVisible: false,
          selectable: true
        },
        uTabsProps: {
          list: [{
              name: '表单信息'
            },
            {
              name: '流转记录'
            },
            // {name: ''}//流程跟踪
          ],
          current: 0
        },
        enterCampusOptions: [],
      };
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        // console.log("this.$route.query",this.$route.query);
        this.taskForm.procInsId = this.$route.query && this.$route.query.procInsId;
        this.taskForm.taskId = this.$route.query && this.$route.query.taskId;
        // 流程任务重获取变量表单
        this.getProcessDetails(this.taskForm.procInsId, this.taskForm.taskId);
        this.loadIndex = this.taskForm.procInsId;
        this.initEnterCampus();
      },
      initEnterCampus() {
        this.$u.api.wflow.business.visitorOuterNetApi.dictionaryEnterCampus({})
          .then((res) => {
            this.enterCampusOptions = res.data;
          });
      },
      getEnterCampus(key) {
        console.log(this.enterCampusOptions, key)
        return this.enterCampusOptions.find(_ => _.dictKey == key)?.dictValue || ''
      },
      dynaGetExternalFormComponent(routeKey) {
        // console.log("根据当前路由标识：", routeKey, this.getExternalFormComponent(routeKey).component);
        return this.getExternalFormComponent(routeKey).component;
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      setIcon(val) {
        if (val) {
          return 'checkmark';
        } else {
          return 'clock';
        }
      },
      setColor(val) {
        if (val) {
          // '#2bc418'
          return 'background: #2bc418;';
        } else {
          // '#b3bdbb'
          return '';
        }
      },
      toggleSelection(selection) {
        if (selection && selection.length > 0) {
          this.$nextTick(() => {
            selection.forEach((item) => {
              let row = this.userList.find((k) => k.id === item.id);
              this.$refs.userTable.toggleRowSelection(row);
            });
          });
        } else {
          this.$nextTick(() => {
            this.$refs.userTable.clearSelection();
          });
        }
      },
      /** 流程变量赋值 */
      handleCheckChange(val) {
        if (val instanceof Array) {
          this.taskForm.values = {
            approval: val.join(',')
          };
        } else {
          this.taskForm.values = {
            approval: val
          };
        }
      },
      getProcessDetails(procInsId, taskId) {
        const params = {
          procInsId: procInsId,
          taskId: taskId
        };
        this.$u.api.wflow.process.detailProcess(params)
          .then((res) => {
            // debugger;
            const data = res.data;
            this.xmlData = data.bpmnXml;
            this.processFormList = data.processFormList;
            this.taskFormOpen = data.existTaskForm;
            this.historyProcNodeList = data.historyProcNodeList;
            this.finishedInfo = data.flowViewer;
            this.flowData.curTask = data.taskFormInfo.task;
            this.flowData.currentUser.currentUserId = this.vuex_userId;
            this.flowData.currentUser.currentUserDeptId = this.vuex_deptId;
            this.formOpen = true;
            // console.log("flowData",this.flowData);
          })
          .catch((error) => {
            console.error(error);
          });
      },
      changeCurrentUser(val) {
        this.currentUserId = val.id;
      },
      /** 接收子组件传的值 */
      getData(data) {
        if (data) {
          const variables = [];
          data.fields.forEach((item) => {
            let variableData = {};
            variableData.label = item.__config__.label;
            // 表单值为多个选项时
            if (item.__config__.defaultValue instanceof Array) {
              const array = [];
              item.__config__.defaultValue.forEach((val) => {
                array.push(val);
              });
              variableData.val = array;
            } else {
              variableData.val = item.__config__.defaultValue;
            }
            variables.push(variableData);
          });
          this.variables = variables;
        }
      },
      doSubmitExternalForm(data) {
        // empty handle
        // console.log("接收到外置表单组件的数据:",data);
      },
      closeHandler() {
        this.dialog.isVisible = false;
      },
      uTabsChange(index) {
        this.uTabsProps.current = index;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    position: relative;
    height: 100vh;
    background: #F7F7F7;
    overflow: auto;
  }

  .tabs {
    position: relative;
    display: flex;
    height: 88rpx;
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      display: block;
      border-top: 1px solid #F7F7F7;
    }

    .tab {
      position: relative;
      width: 100%;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 500;
      color: #999;

      &::after {
        content: '';
        position: absolute;
        bottom: 4rpx;
        left: 50%;
        display: inline-block;
        width: 32rpx;
        height: 8rpx;
        border-radius: 4rpx;
        background: transparent;
        transform: translateX(-50%);
      }

      &.active {
        font-weight: 700;
        color: #333;

        &::after {
          background: #3989FC;
        }
      }
    }
  }

  .card-list {
    padding: 24rpx 24rpx 0;
  }

  .card-item {
    border-radius: 8rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 24rpx;
    background: #fff;
  }

  .card-item-hd {
    position: relative;
    margin-bottom: 24rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -32rpx;
      width: 6rpx;
      height: 40rpx;
      border-radius: 0 6px 6px 0;
      background: #3989FC;
    }
  }

  .card-title {
    margin-bottom: 16rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;
  }

  .card-desc {
    font-size: 24rpx;
    font-weight: 500;
    color: #333;

    &+.card-desc {
      margin-top: 16rpx;
    }

    .label {
      font-weight: 700;
    }

    .primary {
      color: #3989FC;
    }
  }

  .visitor-bar {
    display: flex;
    align-items: flex-start;
  }

  .visitor-avatar {
    width: 196rpx;
    height: 196rpx;
    border-radius: 8rpx;
    margin-right: 24rpx;
    background: #F7F7F7;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .visitor-content {
    flex: 1;
    min-width: 0;
    font-size: 24rpx;
    font-weight: 500;
    color: #333;
  }

  .visitor-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: #333;

    .tag {
      display: inline-block;
      border-radius: 40rpx;
      padding: 0 32rpx;
      margin-left: 16rpx;
      line-height: 40rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #3989FC;
      background: #DEEBFE;
    }
  }

  .visitor-desc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 8rpx;
    }
  }

  .step-list {
    padding: 24rpx 24rpx 0 80rpx;
  }

  .step-item {
    position: relative;
    border-radius: 8rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 24rpx;
    background: #fff;

    &::before {
      content: '';
      position: absolute;
      top: 12rpx;
      left: -20rpx;
      display: inline-block;
      border-top: 16rpx solid transparent;
      border-right: 20rpx solid #fff;
      border-bottom: 16rpx solid transparent;
    }

    &:last-child .step-line::after {
      background: transparent;
    }
  }

  .step-line {
    position: absolute;
    top: 16rpx;
    bottom: -40rpx;
    left: -56rpx;
    width: 24rpx;

    &::after {
      content: '';
      position: absolute;
      top: 24rpx;
      bottom: 0;
      left: 50%;
      display: inline-block;
      width: 2rpx;
      background: rgba(22, 118, 254, .3);
      transform: translateX(-50%);
    }
  }

  .step-status {
    position: absolute;
    top: 0;
    left: 0;
    width: 24rpx;
    height: 24rpx;
    z-index: 1;
    display: inline-block;
    border-radius: 50%;
    background: #999;

    &.current {
      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 9;
        width: 24rpx;
        height: 24rpx;
        border: 1px solid #3989FC;
        border-radius: 50%;
        background: #fff;
        transform: translate(-50%, -50%);
      }

      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: rgba(57, 137, 252, .2);
        transform: translate(-50%, -50%);
      }
    }

    &.done {
      background: linear-gradient(0deg, #3989FC 0%, #83AEEB 100%);
    }
  }

  .step-title {
    margin-bottom: 24rpx;
    font-weight: 700;
    font-size: 32rpx;
    color: #333;
  }

  .step-desc {
    font-size: 28rpx;
    font-weight: 500;
    color: #999;

    &+.step-desc {
      margin-top: 16rpx;
    }

    .value {
      color: #666;
    }

    .primary {
      color: #3989FC;
    }
  }

  .u-tag+.u-tag {
    margin-left: 10rpx;
  }

  .u-card-wrap {
    background-color: $u-bg-color;
    padding: 1px;
  }

  .u-body-item {
    font-size: 32rpx;
    color: #333;
    padding: 20rpx 10rpx;
  }

  .u-body-item image {
    width: 120rpx;
    flex: 0 0 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-left: 12rpx;
  }

  .u-node {
    width: 40rpx;
    height: 40rpx;
    border-radius: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #d0d0d0;
  }

  .u-order-title {
    color: #333333;
    font-weight: bold;
    font-size: 28rpx;
  }

  .u-order-desc {
    color: rgb(150, 150, 150);
    font-size: 28rpx;
    margin-bottom: 6rpx;
  }

  .u-order-time {
    color: rgb(200, 200, 200);
    font-size: 26rpx;
  }
</style>